<template>
  <view class="c-slider" :style="{height:blockSize+'px', width:realWidth+'px'}">
    <view class="c-slider-bar" :style="{background:bgColor, width:realWidth+'px', height:height+'px'}"></view>
    <view class="c-slider-active-bar" :style="{background:activeColor, width:activeWidth+'px', height:height+'px', marginLeft:activeLeft+'px'}"></view>
    <view class="c-slider-block" :style="{background:blockBgColor, height:blockSize+'px', width:blockSize+'px', 'margin-left':xMax+'px'}"
      @touchstart.stop="touchstart" @touchmove.stop="touchmove" @touchend.stop="touchend" data-tag="max"></view>
  </view>
</template>
<script>
  const _windowWidth = uni.getSystemInfoSync().windowWidth;
  export default {
    data() {
      return {
        realWidth: 200,
        realMax: 200,
        xMin: 0,
        left1: 0,
        xMax: 100,
        currentBlock: '',
        minValue: 0,
        maxValue: 100,
        activeWidth: 0,
        activeLeft: 0
      };
    },
    props: {
      bgColor: {
        type: String,
        default: "#F6F7F8"
      },
      activeColor: {
        type: String,
        default: "#3688FF"
      },
      width: {
        type: Number,
        default: 750
      },
      height: {
        type: Number,
        default: 2
      },
      blockBgColor: {
        type: String,
        default: "#FFFFFF"
      },
      blockSize: {
        type: Number,
        default: 30
      },
      min: {
        type: Number,
        default: 0
      },
      minDefault: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 100
      },
      maxDefault: {
        type: Number,
        default: 100
      }
    },
    created: function() {
      this.realWidth = this.upx2px(this.width);
      this.left1 = (_windowWidth - this.realWidth) / 2;
      this.realMax = this.realWidth - this.blockSize;
      this.setSlider();
    },
    watch: {
      minDefault: function() {
        this.setSlider();
      },
      maxDefault: function() {
        this.setSlider();
      }
    },
    methods: {
      setSlider: function() {
        this.xMin = (this.minDefault - this.min) / (this.max - this.min) * this.realMax;
        this.xMax = (this.maxDefault - this.min) / (this.max - this.min) * this.realMax;
        this.minValue = this.minDefault;
        this.maxValue = this.maxDefault;
        this.activeLeft = this.xMin + 5;
        this.activeWidth = this.xMax - this.xMin;
      },
      setSlider2: function() {
        this.xMin = (this.minDefault - this.min) / (this.max - this.min) * this.realMax;
        this.xMax = (this.maxValue - this.min) / (this.max - this.min) * this.realMax;
        this.minValue = this.minDefault;
        // this.maxValue = this.maxDefault;
        this.activeLeft = this.xMin + 5;
        this.activeWidth = this.xMax - this.xMin;
      },
      touchstart: function(e) {
        this.currentBlock = e.target.dataset.tag;
        if (this.currentBlock == 'min') {
          var pageX = e.pageX || e.changedTouches[0].pageX;
          pageX = pageX - this.left1;
          this.xMin = pageX;
        } else {
          var pageX = e.pageX || e.changedTouches[0].pageX;
          pageX = pageX - this.left1;
          this.xMax = pageX;
        }
        this.$emit('touchstart','')
      },
      touchmove: function(e) {
        this.calculate(e);
        // this.$emit('touchmove','')
      },
      px2upx: function(px) {
        return (750 / _windowWidth) * px;
      },
      upx2px: function(upx) {
        return (_windowWidth / 750) * upx;
      },
      calculate: function(e) {
        var pageX = e.pageX || e.changedTouches[0].pageX;
        pageX = pageX - this.left1;
        if (this.currentBlock == 'min') {
          var xMin = this.xMin + (pageX - this.xMin);
          // 最左侧限制
          if (xMin < 0) {
            xMin = 0;
          }
          // 最右侧限制
          if (xMin >= this.realMax) {
            xMin = this.realMax;
          }
          this.xMin = xMin;
          // 计算值
          var value = this.xMin / this.realMax * (this.max - this.min);
          value = parseInt(value);
          value = value + this.min;
          this.minValue = value;
        } else {
          var xMax = this.xMax + (pageX - this.xMax);
          // 最左侧限制
          if (xMax < 0) {
            xMax = 0;
          }
          // 最右侧限制
          if (xMax >= this.realMax) {
            xMax = this.realMax;
          }
          this.xMax = xMax;
          // 计算值
          var value = this.xMax / this.realMax * (this.max - this.min);
          value = parseInt(value);
          value = value + this.min;
          this.maxValue = value;
        }
         this.setSlider2()
      },
      touchend() {
        // 修改c UI 组件，当触摸停止时，回调父组件传入的方法
        // 获得2个值并传递出去
				console.log('maxValue :>> ', this.maxValue);
        this.$emit('change',this.maxValue)
      }
    }
  };
</script>
<style scoped>
  .c-slider {
    position: relative;
    /* padding: 10px 0; */
  }

  .c-slider-bar {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }

  .c-slider-block {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    border-radius: 50%;
    box-shadow: 0rpx 0rpx 6rpx #ccc;
  }

  .c-slider-active-bar {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
</style>
